 /*
 * @description: 商家物料清单详情查看操作记录
 * @Author: along
 * @Date: 2021-03-17
 * @Last Modified by: along
 * @Last Modified time: 2021-03-17
 */
<template>
    <el-dialog
        title="查看操作记录"
        :visible.sync="dialogVisible"
        width="450px"
        :close-on-click-modal="false"
        class="materielRecord"
    >
        <div class="_model">
            <el-timeline>
                <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :timestamp="activity.create_time"
                >
                    {{ activity.content }}
                </el-timeline-item>
            </el-timeline>
        </div>
        <span
            slot="footer"
            class="dialog-footer"
        >
            <el-button
                size="small"
                type="primary"
                @click="dialogVisible = false"
                :style="{width: '120px'}"
            >
                知道了
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'MaterielRecord',
    props: {
        material_no: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            dialogVisible: false,
            activities: [
                // {
                //     content: '给商家创建物料清单',
                //     create_time: '2018-04-15 00:00:00'
                // }, {
                //     content: '商家已提交物料清单',
                //     create_time: '2018-04-13 00:00:00'
                // }, {
                //     content: '平台审核不通过',
                //     create_time: '2018-04-11 00:00:00'
                // }
            ]
        };
    },
    methods: {
        show (obj) {
            this.dialogVisible = true;
            this.getList();
        },
        close () {
            this.dialogVisible = false;
        },
        getList () {
            this.$post('/student/hire_room_series_material%5Cget_log_list', {
                material_no: this.material_no
            }, resp => {
                if(resp.code == 1) {
                    this.activities = resp.data.list.reduce((cur,next) => {
                        cur.push({
                            content: next.text,
                            create_time: this.filterTime(next.create_time * 1000, 'yyyy.MM.dd HH:mm:ss')
                        });
                        return cur;
                    },[]);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },
        filterTime (dateTmp, fmtTmp) {
            let fmt = fmtTmp;
            let date = dateTmp;

            if (!fmt) {
                fmt = 'yyyy.MM.dd';
            }
            if (!(date instanceof Date)) {
                date = new Date(date);
            }
            let o = {
                "M+": date.getMonth() + 1, //月份
                "d+": date.getDate(), //日
                "h+": date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, //小时
                "H+": date.getHours(), //小时
                "m+": date.getMinutes(), //分
                "s+": date.getSeconds(), //秒
                "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                "S": date.getMilliseconds() //毫秒
            };
            let week = {
                "0": "日",
                "1": "一",
                "2": "二",
                "3": "三",
                "4": "四",
                "5": "五",
                "6": "六"
            };

            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            if (/(E+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "星期" : "周") : "") + week[date.getDay() + ""]);
            }
            for (var k in o) {
                if (new RegExp("(" + k + ")").test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        }
    }
};
</script>

<style lang="less" scoped>
.materielRecord {
    ._model {
        width: 100%;
        display: flex;
        flex-direction: column;
        max-height: 300px;
        overflow: hidden;
        overflow-y: auto;
        padding-top: 15px;
        &::-webkit-scrollbar {
            width: 3px;
        }
    }
    .dialog-footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
    }
}
</style>

<style lang="less">
.materielRecord {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding: 32px 44px 0px 44px;
    }
    .el-textarea__inner {
        resize: none;
    }
    .el-timeline-item__wrapper {
        display: flex;
        align-items: center;
    }
    .el-timeline-item__timestamp.is-bottom {
        margin-top: 0px;
    }
    .el-timeline-item__content {
        order: 2;
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
    }
    .el-timeline-item__timestamp {
        order: 1;
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        margin-right: 24px;
    }
    .el-timeline-item__node--normal {
        width: 8px;
        height: 8px;
        left: 1px;
    }
}
</style>